<template>
    <div class="content">
        <ol v-for="news in newsStore.newsList">
            <li>id:{{ news.id }}</li>
            <li>title:{{ news.title }}</li>
            <li>content:{{ news.content }}</li>
        </ol>
        <button @click="addData">添加数据</button>
        <button @click="changeData">修改数据</button>
    </div>
</template>

<script lang="ts">
export default {
    name: 'News'
}
</script>

<script setup lang="ts">
export interface News { 
    id: number,
    title: string,
    content:string
}
import { useNewsStore } from '@/store/NewsStore';
const newsStore = useNewsStore()

function addData() { 
    newsStore.add({id:3,title:'一只鸟',content:'不会飞的鸟'});
}

function changeData() { 
    newsStore.newsList[2].title+='1'
}

</script>

<style lang="css">
    .content{
        margin: 20px;
        background-color: burlywood;
        width: 500px;
        height: 250px;
    }
</style>